<template>
    <div class="standard">

        <div v-if="fileArr.length">
            <div class="header">
                <div v-for="item in fileArr"  class="file">
                    <div class="icon">
                        <svg class="coloricon" aria-hidden="true">
                            <use :xlink:href="'#icon-Pdf'"></use>
                        </svg>
                    </div>
                    <div class="txt">

                        <p>{{item.name}}</p>
                        <span>文件大小:{{filterSize(item.content_length)}}</span>
                    </div>
                </div>
            </div>
            <div class="pdfFile">
                <PdfView v-for="item in fileArr" :MyUrl="item.file_url" />
            </div>
        </div>

        <div v-else>
            <div class="empty">
                <el-empty :image-size="200"  description="暂未关联课程标准" />
            </div>
        </div>
    </div>

      <!-- 课程标准弹出层 -->
  <pdfDialog ref="sDialog" @addSuccess="addSuccess"></pdfDialog>
</template>

<script setup>
import { onMounted, ref } from "vue"
import { Plus } from '@element-plus/icons-vue'
import PdfView from '@/components/PdfView.vue';
import pdfDialog from "./pdf-dialog.vue";
import {materialList,deleteData} from "@/api/material"
import counterStore from "@/store/modules/counter";
import useUserStore from "@/store/modules/user";



import {
  filterSize,
} from "@/utils/common";
const sDialog = ref(null);

const fileArr=ref([])

// 添加课程标准
const addKcStandard=()=>{
    sDialog.value.openDialog();
}

// 关联成功返回的方法
const addSuccess=()=>{
    getStandardFile()
}

// 查询已添加的课程标准 t=3
const getStandardFile=async()=>{
    await materialList({
        t:3,
        page_num:1,
        page_size:10,
        bk_id:counterStore().bkItem.id,

    }).then(res=>{
        console.log(res);  
        fileArr.value = res.list.filter(item => item.file_id !== null)
    })
}

// 删除已选中的素材
const onClose=(id)=>{

    deleteData(id).then(res=>{
        console.log(res); 
       fileArr.value.splice(0,1)
    })
    sDialog.value.closeMaterial(0)
}
onMounted(()=>{
    getStandardFile()

})

</script>
<style lang="scss" scoped>
.standard {
    padding: 15px 0 0 10px;
 max-height: calc(100vh - 130px);
 overflow-y: hidden;
    .empty {
        height: 80vh;
        display: flex;
        align-items: center;
        justify-content: center;
    }


    .header {
        display: flex;
        align-items: center;
        .file {
            display: flex;
            align-items: center;
            .txt {
                margin: 0 10px 0 6px;

                p {
                    font-size: 16px;
                    color: #666;
                }

                span {
                    font-size: 12px;
                    color: #999;
                }
            }

            .coloricon {
                font-size: 30px;
            }

            .close {
                color: red;
                cursor: pointer;
            }
        }
    }

    .pdfFile{
        margin-top: 20px;
        max-height: calc(100vh - 130px);
    }

}
</style>